<template>
<div>
  <el-row>
    <el-col>
    <div style="text-align:center">
        <el-button type = "primary">添加</el-button>
        <el-button type = "primary">删除</el-button>
        <el-button type = "primary">保存</el-button>
        <el-button type = "primary">取消</el-button>
      </div>
    <el-table size="mini" :data="view_info.tabledata" border style="width: 100%" highlight-current-row>
      <!-- <el-table-column type="index"></el-table-column> -->
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column v-for="(v,i) in view_info.columns"  :key='i' :prop="v.field" :label="v.title" :width="v.width" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <div @dblclick="tabledbclink(scope.row)">
              <span v-if="scope.row.isSet">
                <div v-if="v.type === 'date'">
                  <el-date-picker v-model="view_info.sel[v.field]" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
                </div>
                <div v-else>
                  <el-input size="small" placeholder="请输入内容" v-model="view_info.sel[v.field]">
                  </el-input>
                </div>
              </span>
              <span v-else>{{scope.row[v.field]}}</span>
            </div>
          </template>
      </el-table-column>
      <el-table-column label="操作" width="100">
          <template slot-scope="scope">
              <span class="el-tag el-tag--info el-tag--mini" style="cursor: pointer;" @click="changeTableData(scope.row,scope.$index,true)">
                  {{scope.row.isSet?'保存':"修改"}}
              </span>
              <span v-if="!scope.row.isSet" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;"  @click="delTableData(scope.row,scope.$index)">
                  删除
              </span>
              <span v-else class="el-tag  el-tag--mini" style="cursor: pointer;" @click="cancelTableData(scope.row)">
                  取消
              </span>
          </template>
      </el-table-column>
  </el-table>
  </el-col>
      <el-col>
          <div class="el-table-add-row" style="width: 99.2%;" @click="addTableData()"><span>+ 添加</span></div>
      </el-col>
  </el-row>
</div>
</template>
<script>
export default {
  data () {
    return {
      view_info: {
        sel: null, // 选中行
        editID: 0,
        columns: [
        { field: 'showid', title: '活动 ID', width: 70, type: 'text' },
        { field: 'actname', title: '活动名称', width: 80, type: 'text' },
        { field: 'actdate', title: '活动时间', width: 80, type: 'date' },
        { field: 'content', title: '活动内容', width: 80, type: 'text' },
        { field: 'custinfo', title: '客户信息', width: 80, type: 'text' },
        { field: 'custsex', title: '客户性别', width: 80, type: 'text' },
        { field: 'custnum', title: '客户电话', width: 80, type: 'text' },
        { field: 'address', title: '活动地点', width: 80, type: 'text' },
        { field: 'startdate', title: '活动开始时间', width: 100, type: 'date' },
        { field: 'enddate', title: '活动结束时间', width: 100, type: 'date' }],
        tabledata: []
      }
    }
  },
  methods: {
    addTableData () {
        for (let i of this.view_info.tabledata) {
            if (i.isSet) return this.$message.warning('请先保存当前编辑项')
        }
        let j = { id: 0, 'showid': '', 'actname': '', 'actdate': '', 'content': '', 'custinfo': '', 'custsex': '', 'custnum': '', 'address': '', 'startdate': '', 'enddate': '', 'isSet': true }
        this.view_info.tabledata.push(j)
        this.view_info.sel = JSON.parse(JSON.stringify(j))
    },
    clearTableState () {
      this.view_info.editID = 0
      this.view_info.sel = null
    },
    cancelTableData (row) {
      console.log(row.isSet)
      row.isSet = !row.isSet
      this.clearTableState()
    },
    tabledbclink (row) {
      console.log(row)
      if (this.view_info.editID > 0) {
        this.$message.warning('请先保存当前修改')
        return
      }
      if (row.isSet === false) {
        this.view_info.sel = JSON.parse(JSON.stringify(row))
        row.isSet = true
        this.view_info.editID = row.id
      }
    },
    changeTableData (row, index, cg) {
      if (this.view_info.editID > 0) {
        if (this.view_info.editID !== row.id) {
          this.$message.warning('请先保存当前修改')
          return
        }
        console.log('update data ' + this.view_info.editID)
        const SQL = `update activity set showid='${this.view_info.sel.showid}',
        actname='${this.view_info.sel.actname}',
        actdate='${this.view_info.sel.actdate}',
        content='${this.view_info.sel.content}',
        custinfo='${this.view_info.sel.custinfo}',
        custsex='${this.view_info.sel.custsex}',
        custnum='${this.view_info.sel.custnum}',
        address='${this.view_info.sel.address}',
        startdate='${this.view_info.sel.startdate}',
        enddate='${this.view_info.sel.enddate}' where id='${this.view_info.sel.id}'`
        console.log(SQL)
        this.$db.run(SQL, err => {
          if (err) {
            this.$message.warning('保存失败 er：' + err)
          } else {
            this.$message({
                message: '保存成功',
                type: 'success'
              })
            this.clearTableState()
            this.getSelfTableData()
            }
        })
        return
      }
      // 提交数据
      if (row.isSet) {
          console.log(this.view_info.sel)
          // for (let i of this.view_info.tabledata) {
          //   if (!i.isSet && i.id === this.view_info.sel.id) {
          //       this.$message.warning('ID 不可以重复')
          //       return false
          //   }
          // }
          const SQL = `INSERT INTO activity (showid,actname,actdate,content,custinfo,custsex,custnum,address,startdate,enddate)
          VALUES ('${this.view_info.sel.showid}','${this.view_info.sel.actname}','${this.view_info.sel.actdate}','${this.view_info.sel.content}','${this.view_info.sel.custinfo}','${this.view_info.sel.custsex}','${this.view_info.sel.custnum}','${this.view_info.sel.address}','${this.view_info.sel.startdate}','${this.view_info.sel.enddate}')`
          console.log(SQL)
          this.$db.run(SQL, err => {
            if (err) {
              this.$message.warning('保存失败 er：' + err)
            } else {
              this.$message({
                message: '保存成功',
                type: 'success'
              })
              this.getSelfTableData()
              }
          })
      } else {
          if (this.view_info.editID > 0) {
            this.$message.warning('请先保存当前修改')
            return
          }
          this.view_info.sel = JSON.parse(JSON.stringify(row))
          row.isSet = true
          this.view_info.editID = row.id
          console.log('editID ' + row.id)
      }
    },
    delTableData (row, index) {
      console.log('delete ' + row.id)
      const SQL = `delete from activity where id=` + row.id
      console.log(SQL)
      this.$db.run(SQL, err => {
        if (err) {
          this.$message.warning('删除失败 er：' + err)
        } else {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.getSelfTableData()
          }
      })
    },
    getSelfTableData () {
      console.log('getSelfTableData')
      this.view_info.tabledata = []
      /*
      { field: 'id', title: '活动 ID', width: 70 },
        { field: 'actname', title: '活动名称', width: 80 },
        { field: 'actdate', title: '活动时间', width: 80 },
        { field: 'content', title: '活动内容', width: 80 },
        { field: 'custinfo', title: '客户信息', width: 80 },
        { field: 'custsex', title: '客户性别', width: 80 },
        { field: 'custnum', title: '客户电话', width: 80 },
        { field: 'address', title: '活动地点', width: 80 },
        { field: 'startdate', title: '活动开始时间', width: 100 },
        { field: 'enddate', title: '活动结束时间', width: 100 }],
      */
      var sql = 'select id,showid, actname, actdate, content, custinfo, custsex, custnum, address, startdate, enddate from activity'
      this.$db.all(sql, (err, res) => {
        if (err) {
            this.$message.warning('获取数据失败 er：' + err)
        } else {
          // console.log(res)
          // console.log(res.length)
          for (var i = 0; i < res.length; i++) {
              console.log(res[i])
              res[i].isSet = false
              this.view_info.tabledata.push(res[i])
          }
          // this.view_info.tabledata = res
        }
      })
    }
  },
  created () {
      console.log('created')
      this.getSelfTableData()
    }
}
</script>
<style>
.el-table-add-row {
    margin-top: 10px;
    width: 100%;
    height: 34px;
    border: 1px dashed #c1c1cd;
    border-radius: 3px;
    cursor: pointer;
    justify-content: center;
    display: flex;
    line-height: 34px;
}
.el-table .cell, .el-table th {
    height: 35px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 15px;
    user-select: text;
}
</style>
